import './index.scss'
import {Image, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext} from 'react'
import {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import MyNav from '@/components/nav'
import {imagesUrl} from '@/utils/baseUrl'
import WaterTarget from '@/components/devCard/waterTarget'
import {DeviceStatusIcon, IconImg} from '@/components/images'
import {
  HistoryRow,
  ParamAnalyzeCard,
  ParamCardRow,
  UnBindDevRow
} from './components'
import AbnormalMsg from '@/components/devCard/abnormalMsg'
import {toHome} from '@/utils/pageRedirect'
import {singledevparamsStore} from './model'
import appStore from '@/store/app'
import dayjs from 'dayjs'
import {ParamStatusCircle} from '@/components/devCard/paramsCard'

const Singledevparams: React.FC = ({}): JSX.Element => {
  let router = useRouter()
  const {
    pageQuery,
    devAnalyze,
    devDetil,
    updatePageQuery,
    updateDevDetil,
    updateDateRange,
    clearPage
  } = useContext(singledevparamsStore)

  const {userInfo} = useContext(appStore)

  // 对应 onShow
  useDidShow(() => {
    console.log('Singledevparams useDidShow')
    if (!Object.keys(router.params).length && !router.params.devId) {
      toHome()
    } else if (router.params.devId) {
      clearPage()
      updatePageQuery({devId: router.params.devId})
      updateDevDetil(userInfo.userId)
      updateDateRange([
        dayjs().format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD')
      ])
    }
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Singledevparams useDidHide')
    console.log(pageQuery)
  })

  return (
    <View className="w-screen h-screen bg-xxx_bg overflow-hidden flex flex-col relative">
      <Image
        src={imagesUrl + 'bg-home-singleDevParams.png'}
        className="w-full absolute top-0 left-0 z-10"
        style={{height: '41%'}}
      ></Image>
      {/* 自定义状态栏 */}
      <MyNav>{devDetil?.devName || ''}</MyNav>
      <View className="flex-1 z-20 overflow-hidden">
        <View className="h-full px-16 pb-65 overflow-y-auto">
          {/* 水质仪表盘 */}
          <WaterTarget
            value={devDetil?.devDataStatisticPack.standRatio}
            text={devDetil?.devDataStatisticPack.checkResult}
            style={{
              width: '200rpx',
              height: '200rpx',
              margin: '48rpx auto 32rpx'
            }}
            textStyle={{
              fontSize: '24rpx'
            }}
            valueStyle={{
              fontSize: '64rpx'
            }}
          ></WaterTarget>

          {/* 状态及检测时间 */}
          <View className="w-full h-20 mb-24 flex justify-center items-center">
            <DeviceStatusIcon
              status={devDetil?.devStatus || '---'}
              style={{
                width: '28rpx',
                height: '28rpx',
                marginRight: '14rpx'
              }}
            ></DeviceStatusIcon>
            <View className="hanzi text-14 font-bold mr-25">
              {devDetil?.devStatus || '---'}
            </View>
            <View className="h-20 text-14 text-xx_text">
              {devDetil?.devStatus === '在线'
                ? `工作时长 ${
                    devDetil?.devDataStatisticPack.totalCheckWorkHour || 0
                  } 小时`
                : `离线时长 ${
                    devDetil?.devDataStatisticPack.totalOffLineCheckHour || 0
                  } 小时`}
            </View>
          </View>

          {/* 水质健康 */}
          <ParamAnalyzeCard
            data={devAnalyze || undefined}
            onDateRangeChanged={range => {
              console.log('%c range change', 'color:green')
              updateDateRange(range)
            }}
          ></ParamAnalyzeCard>

          <AbnormalMsg
            devId={devDetil?.devId || 0}
            warningNum={devDetil?.devDataStatisticPack.reportCount}
            abnormalNum={devDetil?.devDataStatisticPack.exceptionCount}
            style={{
              marginTop: '8rpx'
            }}
          ></AbnormalMsg>

          <ParamCardRow
            list={
              devDetil?.paramList && devDetil.paramList.length
                ? devDetil.paramList
                : []
            }
          ></ParamCardRow>

          <HistoryRow
            devId={devDetil?.devId}
            devName={devDetil?.devName}
          ></HistoryRow>

          <View className="grid grid-cols-2 gap-x-16">
            <View className="">
              <View className="flex items-center justify-between">
                <View className="hanzi text-12 text-info mb-4">检测次数</View>
              </View>
              <View className="w-full bg-white rounded-12 h-142 p-8 flex flex-col items-center">
                <View className="w-full flex-1 border-0 border-b-1 border-x_line border-solid">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-4">
                    总次数
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.totalCheckCount}次
                  </View>
                </View>

                <View className="w-full flex-1 pt-8 border-0 border-b-1 border-x_line border-solid">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-4">
                    正常次数
                    <ParamStatusCircle status="适宜"></ParamStatusCircle>
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.normalCheckCount}次
                  </View>
                </View>

                <View className="w-full flex-1 pt-8">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-4">
                    异常次数
                    <ParamStatusCircle status="偏高"></ParamStatusCircle>
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.exceptionCheckCount}次
                  </View>
                </View>
              </View>
            </View>

            <View className="">
              <View className="flex items-center justify-between">
                <View className="hanzi text-12 text-info mb-4">使用时长</View>
              </View>
              <View className="bg-white rounded-12 h-142 p-8 flex flex-col items-center">
                <View className="w-full flex-1 border-0 border-b-1 border-x_line border-solid">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-8">
                    总时长
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.totalHour}小时
                  </View>
                </View>
                <View className="w-full flex-1 pt-8 border-0 border-b-1 border-x_line border-solid">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-4">
                    工作时长
                    <IconImg
                      imgName="device-online"
                      style={{
                        width: '32rpx',
                        height: '32rpx'
                      }}
                    ></IconImg>
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.totalCheckWorkHour}小时
                  </View>
                </View>
                <View className="w-full flex-1 pt-8">
                  <View className="hanzi text-14 text-left flex items-center justify-start gap-x-4">
                    离线时长
                    <IconImg
                      imgName="device-offline"
                      style={{
                        width: '32rpx',
                        height: '32rpx'
                      }}
                    ></IconImg>
                  </View>
                  <View className="w-full notHanzi text-14 text-right truncate">
                    {devDetil?.devDataStatisticPack.totalOffLineCheckHour}小时
                  </View>
                </View>
              </View>
            </View>
          </View>

          <View className="mt-16">
            {devDetil?.isManage === '是' ? (
              <UnBindDevRow devId={pageQuery.devId}></UnBindDevRow>
            ) : null}
          </View>
        </View>
      </View>
    </View>
  )
}
export default observer(Singledevparams)
